<template>
  <div class="home">
    <div class="beijingtu">
      <div class="beijingtu2">
        <div class="beijingtu3">
          <el-form class="center" ref="form" :model="form" @submit.native.prevent>
            <p class="center_title">登录</p>
            <div class="pub_box">
              <el-form-item
                for="yx"
                class="public_fm"
                label="邮箱："
                prop="email"
              >
                <el-input
                  id="yx"
                  class="public_ipt"
                  placeholder="请输入邮箱"
                  v-model="form.email"
                ></el-input>
              </el-form-item>
            </div>
            <div class="pub_box">
              <el-form-item
                for="mm"
                class="public_fm"
                label="密码："
                prop="password"
              >
                <el-input
                  id="mm"
                  class="public_ipt"
                  placeholder="请输入密码"
                  v-model="form.password"
                ></el-input>
              </el-form-item>
            </div>
            <div class="pub_box">
              <el-form-item
                class="public_fm"
                style="padding-left: 8%"
                label="验证码："
              >
                <el-input
                  class="public_ipt"
                  style="margin-right: 8%; width: 35%"
                  v-model="azYanz"
                  placeholder="请输入验证码"
                  @keyup.enter.native='onSubmitemit()'
                />
                <idf @refreshCode="refreshCode"
                  style="display: -webkit-inline-box"
                  :identifyCode="identifyCode"
                ></idf>
                <!-- <a @click="refreshCode">刷新</a> -->
              </el-form-item>
            </div>
            <el-form-item>
              <el-button id="sign" type="primary" @click="onSubmitemit()"
                >登录</el-button>
            </el-form-item>
            <p class="bottom">——————考试题库管理系统——————</p>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import login from "../api/login";
import idf from "./components/identify";
export default {
  components: {
    idf,
  },
  data() {
    return {
      loadingbut: false,
      form: {
        emall: "",
        password: "",
      },
      azYanz: "",
      identifyCodes: "234567890",
      identifyCode: "", //找回密码图形验证码
    };
  },

  // watch:{
  //   identifyCode(val){
  //     console.log(val)
  //     console.log(this.identifyCode)
  //     console.log(this.azYanz)
  //   }
  // },
  created() {
    this.refreshCode();
  },
  methods: {
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
    makeCode() {
      for (let i = 0; i < 5; i++) {
        this.identifyCode +=
          this.identifyCodes[this.randomNum(0, this.identifyCodes.length)];
      }
    },
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    onSubmitemit() {
      // console.log(this.azYanz)
      // console.log(this.identifyCode)
      if (this.identifyCode === this.azYanz) {
        this.onSubmit();
      } else {
        this.refreshCode();
        this.azYanz = "";
        alert("验证码不对");
      }
    },
    // 登录确定
    onSubmit() {
      login.login(this.form.email, this.form.password).then((req) => {
        if (req.data.code === 20000) {
          // 创建token值，跳转主页面
          localStorage.setItem("token", req.data.token);
          this.$router.push("/");
          setTimeout(() => {
            location.reload();
            localStorage.setItem("email", req.data.email);
          }, 100);
        } else if (req.data.code === 500) {
          alert(req.data.msg);
        } else {
          this.refreshCode();
          this.azYanz = "";
          this.$message.error("请输入正确的邮箱或密码");
        }
      });
    },
  },
};
</script>

<style scoped>
.beijingtu {
  width: 100%;
  background: url(./004.png) no-repeat 50%;
  min-height: 100%;
  position: relative;
  height: 100%;
}
.home {
  height: 100%;
}
.div1 {
  height: 100%;
  width: 100%;
}
.center {
  width: 35.5%;
  height: 430px;
  max-width: 40%;
  background-color: white;

  border-radius: 15px;
  margin-left: auto;
  margin-right: auto;
  border: solid;
  opacity: 0.8;
}
.center_title {
  font-size: 25px;
  padding-top: 2%;
  text-align: center;
}
.pub_box {
  width: 100%;
  margin: auto;
  margin-top: 3%;
}
.public_fm {
  padding-left: 8%;
}
.public_ipt {
  width: 75%;
  float: left;
}
#sign {
  margin-top: 1.5%;
  width: 89%;
  margin-left: 5.5%;
}
.bottom {
  font-size: 16px;
  color: darkgray;
  text-align: center;
  /* padding-top: 15px; */
}
.public_ipt {
  width: 89%;
}
.beijingtu2 {
  display: table;
  width: 100%;
  height: 100%;
}
.beijingtu3 {
  display: table-cell;
  vertical-align: middle;
}
.el-form-item {
  margin-bottom: 3.4%;
}
</style>
